<template>
  <div class="line-chart" :id="idname">
  </div>
</template>

<script>

export default {
    props:['idname', 'x', 'y', 'title'],
    mounted(){
        // console.log(this.type_list)
        this.echartsInit()
    },
    methods:{
        //初始化echarts
	    echartsInit() {
            let _this = this;
	    	//柱形图
	    	//因为初始化echarts 的时候，需要指定的容器 id='main'
            var option = {
                    title: {
                        left: 'center',
                        text: this.title,
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    dataZoom: [{
                        type: 'inside',
                        start: 0,
                        end: 100
                    }, {
                        start: 0,
                        end: 100
                    }],
                   xAxis: {
                        type: 'category',
                        data: this.x
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: this.y,
                        type: 'line',
                        smooth: true
                    }]
                };
			let chart = this.$echarts.init(document.getElementById(this.idname) )
            chart.setOption(option)
             window.addEventListener("resize", function () {
                if(chart) {
                   chart.resize();
                }
            });
           		
		}
    }
}
</script>

<style scoped>
.line-chart{
    margin: 40px auto;
    height: 400px;
    width:100%;
    /* background:cornflowerblue; */
}
</style>